<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="http://localhost/firstprojectyougou2/dist/css/Login.min.css">
    <script src="http://localhost/firstprojectyougou2/dist/js/jquery-1.12.4.min.js"></script>
    <script src="http://localhost/firstprojectyougou2/dist/js/Login.min.js"></script>
    <script src="http://localhost/firstprojectyougou2/dist/js/cookie.min.js"></script>
</head>

<body>
    <div id="box">
        <div class="header">
            <div class="header-left">
                <a class="a1" href="javascript:;">关注</a>
                <div class="border-content">
                    <img src="../img/weChat.jpg" alt="">
                    <span>关注公众号</span>
                </div>
                <a class="a2" href="javascript:;">下载App</a>
                <div class="border-content1">
                    <img src="../img/app.jpg" alt="">
                    <span>优购APP下载</span>
                </div>
            </div>

            <div class="header-right">
                <ul>
                    <li>
                        <a rel="nofollow" href="http://localhost/firstprojectyougou2/dist/html/login.html">登录</a>
                        /
                        <a class="black_overlay" href="http://localhost/firstprojectyougou2/dist/html/sign.html">注册</a>
                    </li>
                    <li class="collect">
                        <span class="iconfont icon-like"></span>
                        <a href="http://localhost/firstprojectyougou2/dist/html/cart.html">收藏</a>
                    </li>
                    <li>
                        <span class="iconfont icon-shopping-bag"></span>
                        <a href="http://localhost/firstprojectyougou2/dist/html/cart.html">购物袋</a>
                    </li>
                    <li>
                        <a href="javascript:;">公告</a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- logo -->
        <div class="lg_hd">
            <div class="cen_logo">
                <a href="http://localhost/firstprojectyougou2/dist/index.html">
                    <img src="../img/logo.png" alt="">
                </a>
            </div>
            <div class="cen_word">用户登录</div>
        </div>
        <!--大图-->
        <div class="photo">
            <img src="../img/ba839750211e4c6485fe16dea496b709.jpg" alt="">
        </div>
        <!-- 登录框 -->
        <div class="Login_box">
            <ul class="Login_top">
                <li class="count">
                    <a href="#">账号密码登录</a>
                    
                </li>
                <li class="tel">
                    <a href="#">手机号快捷登录</a>
                </li>
            </ul>
            <div class="reg_form">
                <form id="loginform">
                    <div class="form_item">
                       <!-- 用户名 -->
                        <div class="reg_input">
                            <i class="form_user">
                                <input type="text" placeholder="手机号/会员名称/邮箱" id="us"></i>
                                <span class="ls">用户未注册</span>
                        </div>
                        <!-- 密码 -->
                        <div class="reg_code">
                            <i class="form_user1"></i>
                            <input type="text" placeholder="请输入密码" id="ps">
                            <span class="psw">密码错误</span>
                        </div>
                    </div>

                    <div class="forgot">
                        <a href="#">忘记密码？</a>
                        <button>点击登录</button>
                        <p class="word">使用合作网站账号登陆优购：</p>
                    </div>
                   <!-- 微信,支付宝，qq，微博 -->
                    <div class="go_on">
                        <a class="weChat"
                            href="#"></a>
                        <span class="line">|</span>
                        <a class="b"
                            href="#"></a>
                        <span class="line1">|</span>
                        <a class="c"
                            href="#"></a>
                        <span class="line2">|</span>
                        <a class="d" href="#"></a>
                    </div>
                </form>
            </div>
        </div>

        <!-- 尾部 -->
        <div class="footer">
            <p class="tright">Copyright &copy; 2011-2014 Yougou Technology Co., Ltd.
                <a href="" target="_blank"> 粤ICP备09070608号-4</a> 增值电信业务经营许可证：
                <a href="" target="_blank" style="padding-left:0"> 粤 B2-20090203</a>
            </p>
        </div>
    </div>

    <script>
        var o_bor1 = document.querySelector('.border-content');
        var o_bor2 = document.querySelector('.border-content1');
        var o_a1 = document.querySelector('.a1');
        var o_a2 = document.querySelector('.a2');
        var o_img = document.querySelector('img');

        o_a1.onmouseenter = function () {
            o_bor1.style.display = "block";
        }
        o_a2.onmouseenter = function () {
            o_bor2.style.display = "block";
        }
        o_a1.onmouseleave = function () {
            o_bor1.style.display = "none";
        }
        o_a2.onmouseleave = function () {
            o_bor2.style.display = "none";
        }

    </script>

</body>

</html>